<script setup>
import { Delete } from '@element-plus/icons-vue';
import { ref, watch ,onMounted } from 'vue'
import { merchantQueryApi } from '../../api/merchant';

const merchant = ref({ merchantId: '', merchantName: '', status: null, entryDate: [], beginTime: '', endTime: '' });
const merchantList = ref([{ merchantId: '', merchantName: '', status: null, entryDate: [] }]);
//商户信息表单

//分页
const pageNum = ref(1)//当前页
const pageSize = ref(5)  //每页显示的条数
const background = ref(true) //是否显示背景色
const total = ref(0) //总条数

//对话框
const dialogFormVisible = ref(false);
//每页展示记录数变化
const handleSizeChange = (val) => {
  search();
}
//当前页码变化
const handleCurrentChange = (val) => {
  search();
}
//对merchant进行监听，获取开始和结束日期
watch(() => merchant.value.entryDate, (newVal) => {
  if (newVal && newVal.length === 2) {
    merchant.value.beginTime = newVal[0]
    merchant.value.endTime = newVal[1]
  } else {
    merchant.value.beginTime = ''
    merchant.value.endTime = ''
  }
})

//分页查询
const search = async () => {
  const result = await merchantQueryApi(merchant.value.merchantId, merchant.value.merchantName, merchant.value.status, merchant.value.beginTime, merchant.value.endTime, pageNum.value, pageSize.value)
  if (result.success) {
    merchantList.value = result.data.list
    total.value = result.data.total
  }
}

//清空
const clear = () => {
  merchant.value = ({ merchantId: '', merchantName: '', status: null, entryDate: [] , beginTime: '', endTime: ''})
  search()
}
//添加
const add = () => {
  dialogFormVisible.value = true;
}
//删除
const deleteById = (row) => {
  console.log('delete!', row)
}
//批量删除
const batchDelete = () => {
  console.log('batchDelete!')
}
//修改
const update = (row) => {
  console.log('update!', row)
}

onMounted(() => {
  search();
});
</script>

<template>
  <!-- 标题 -->
  <div class="page-title">商户信息列表</div>
  <!-- 搜索栏 -->
  <div class="search-bar">
    <el-form :inline="true" :model="merchant" class="demo-form-inline">
      <el-form-item label="商户号:">
        <el-input v-model="merchant.merchantId" placeholder="请输入商户号" clearable />
      </el-form-item>
      <el-form-item label="商户名称:">
        <el-input v-model="merchant.merchantName" placeholder="请输入商户名称" clearable />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="merchant.status" placeholder="请选择状态" clearable>
          <el-option label="启用" value="0" />
          <el-option label="禁用" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="入户日期:">
        <el-date-picker v-model="merchant.entryDate" type="daterange" range-separator="到" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="YYYY-MM-DD" :size="size" style="width: 200px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" style="margin-right: 20px;">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 功能按钮 -->
  <div class="button-group">
    <el-button type="primary" @click="add" style="margin-right: 20px;">+ 添加</el-button>
    <el-button type="danger" @click="batchDelete">- 批量删除</el-button>
  </div>
  <!-- 表格 -->
  <div class="table-container">
    <el-table :data="merchantList" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="merchantId" label="商户号" width="180" />
      <el-table-column prop="merchantName" label="商户名称" width="180" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
          <span>{{ scope.row.status === "0" ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="entryDate" label="入户日期" width="200" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="update(row)"><el-icon>
              <EditPen />
            </el-icon> 编辑</el-button>
          <el-button type="danger" size="small" @click="deleteById(row)"><el-icon>
              <Delete />
            </el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="page">
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 30, 50, 75, 100]" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

<!-- 对话框 -->
 <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="merchant">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="merchant.merchantId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="merchant.merchantName" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style>
.page-title {
  font-size: 22px;
  color: #1e7e34;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 2px;
}

.demo-form-inline .el-input {
  --el-input-width: 120px;
}

.demo-form-inline .el-select {
  --el-select-width: 120px;
}

/* 分页 */
.page {
  margin-top: 16px;
}
</style>
